<template>
    <navBar title="个人信息"></navBar>

    <view class="Box">
        <view class="list">
            <text class="name">律师姓名 :</text>
            <text class="content">{{ infoData.realName }}</text>
        </view>
        <view class="list">
            <text class="name">律师职业证号 :</text>
            <text class="content">{{ infoData.credentialNo }}</text>
        </view>
        <view class="list">
            <text class="name">联系电话 :</text>
            <text class="content">{{ infoData.phone }}</text>
        </view>
        <view class="list">
            <text class="name">备用电话 :</text>
            <text class="content">{{ infoData.phoneBack }}</text>
        </view>
        <view class="list">
            <text class="name">出生日期 :</text>
            <text class="content">{{ infoData.birthday }}</text>
        </view>
        <view class="list">
            <text class="name">职业年限 :</text>
            <text class="content">{{ infoData.year }}</text>
        </view>
        <view class="list">
            <text class="name">律所名称 :</text>
            <text class="content">{{ infoData.lawFirmName }}</text>
        </view>
        <!-- <view class="list">
			<text class="name">律所地址 :</text>
			<text class="content">{{ infoData.address }}</text>
		</view> -->
        <view class="list">
            <text class="name">毕业院校 :</text>
            <text class="content">{{ infoData.school }}</text>
        </view>
        <view class="list">
            <text class="name">学历 :</text>
            <text class="content">{{ infoData.degree }}</text>
        </view>
        <view class="list">
            <text class="name">政治面貌 :</text>
            <text class="content">{{ infoData.political }}</text>
        </view>
        <view class="list">
            <text class="name">职业领域 :</text>
            <text class="content">{{ infoData.professionFields }}</text>
        </view>
        <view class="listBox">
            <view class="name">个人简介 :</view>
            <text class="content">{{ infoData.lawyerDesc }}</text>
        </view>
    </view>

    <view class="BoxID">
        <view class="Tittle">身份证信息</view>
        <view class="IDinfo">
            <view class="li">
                <image :src="imgUrls(infoData.idFront)" mode="aspectFill" class="idImg"></image>
                <text class="idTxt">身份证正面</text>
            </view>
            <view class="li">
                <image :src="imgUrls(infoData.idBack)" mode="aspectFill" class="idImg"></image>
                <text class="idTxt">身份证背面</text>
            </view>
            <view class="li">
                <image
                    :src="imgUrls(infoData.qualification)"
                    mode="aspectFill"
                    class="idImg"></image>
                <text class="idTxt">律师资格证</text>
            </view>
            <view class="li">
                <image :src="imgUrls(infoData.photos)" mode="aspectFill" class="idImg"></image>
                <text class="idTxt">工作照</text>
            </view>
        </view>
    </view>
</template>

<script setup>
    import { imgUrls } from '@/utils/utils.js';
    import { lawyerInfo } from '@/utils/api.js';
    import { ref, computed, watch } from 'vue';
    import { onLoad, onShow, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
    import { useMainStore } from '@/stores/index';

    const mainStore = useMainStore();
    const infoData = ref('');

    onLoad(async () => {
        const result = await lawyerInfo();
        if (result.data.professionFields)
            result.data.professionFields = JSON.parse(result.data.professionFields)
                .map((item) => item.value)
                .join(',');
        infoData.value = result.data;
    });
</script>

<style lang="scss">
    page {
        background-color: $page;
        padding-bottom: 30rpx;
    }
</style>
<style lang="scss" scoped>
    .Box {
        width: 710rpx;
        margin: 24rpx auto 0;
        background-color: #ffffff;
        border-radius: 10rpx;
        overflow: hidden;
        padding: 0 20rpx;
        .list {
            width: 100%;
            min-height: 90rpx;
            padding: 20rpx 0;
            border-bottom: 1rpx solid $page;
            display: flex;

            .name {
                color: #666;
                font-size: 28rpx;
                padding-right: 20rpx;
            }
            .content {
                flex: 1;
                color: #333;
                font-size: 28rpx;
                font-weight: 400;
                display: flex;
                justify-content: flex-end;
            }
        }
        .listBox {
            width: 100%;
            padding: 40rpx 0;
            display: flex;
            justify-content: space-between;
            .name {
                flex-shrink: 0 !important;
                color: #666;
                font-size: 28rpx;
                padding-right: 20rpx;
            }
            .content {
                color: #333;
                font-size: 28rpx;
                font-weight: 400;
            }
        }
    }
    .BoxID {
        width: 710rpx;
        margin: 24rpx auto 0;
        background-color: #ffffff;
        border-radius: 10rpx;
        overflow: hidden;
        padding: 0 20rpx 40rpx 20rpx;
        .Tittle {
            width: 100%;
            padding: 24rpx 0 24rpx 18rpx;
            position: relative;
            color: #222s;
            font-size: 30rpx;
            font-weight: 500;
        }
        .Tittle::after {
            content: '';
            width: 2px;
            height: 30rpx;
            background-color: $color_008;
            border-radius: 6rpx;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }
        .IDinfo {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-row-gap: 40rpx;
            grid-column-gap: 24rpx;
            margin-top: 20rpx;
            .li {
                display: flex;
                flex-direction: column;
                align-items: center;
                box-sizing: border-box;
                .idImg {
                    width: 100%;
                    height: 210rpx;
                    border-radius: 10rpx;
                    overflow: hidden;
                }
                .idTxt {
                    color: #666;
                    font-size: 30rpx;
                    margin-top: 20rpx;
                    font-weight: 400;
                }
            }
        }
    }
</style>
